<template>
  <div>
    <div>
      <div style="display: flex;justify-content: center;margin-top: 30px">
        <el-card style="width: 80%;margin: 10px">
          <div style="height: 50px;font-size: 25px">历史订单记录</div>
          <div style="margin-bottom: 10px">
<!--            <el-input style="width: 200px;margin: 0 5px" placeholder="查询酒店"-->
<!--                      v-model="tableData.hotel_name"></el-input>-->
<!--            <el-button type="primary" @click="load(1)">查询</el-button>-->
<!--            <el-button type="success" @click="reset">重置</el-button>-->
          </div>
          <el-table ref="shopsTable" :data="tableData" stripe
                    :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
            <el-table-column prop="id" label="订单id" align="center"></el-table-column>
            <el-table-column prop="hotel_name" label="酒店"></el-table-column>
            <el-table-column prop="room_type" label="房间"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="status" label="订单状态"></el-table-column>
            <el-table-column label="操作" width="200%" align="center">
              <template v-slot="scope">
                <el-button size="mini" type="primary" plain @click="cancel(scope.row.id)"
                           v-if="scope.row.status === '待支付'">取消订单
                </el-button>
                <el-button size="mini" type="primary" plain @click="GoPay(scope.row.id)"
                           v-if="scope.row.status === '待支付'">去支付
                </el-button>
                <el-button size="mini" type="primary" plain @click="comment(scope.row.id)"
                           v-if="scope.row.status === '已完成'">评价
                </el-button>
                <el-button size="mini" type="primary" plain @click="live(scope.row.id)"
                           v-if="scope.row.status === '已预约'">入住
                </el-button>
                <el-button size="mini" type="primary" plain @click="TUI(scope.row.id)"
                           v-if="scope.row.status === '入住'">退房
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 10px 0">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page_id"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="page_size"
                layout="total,  prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogComment" width="30%">
      <el-form ref="commentRef" :model="commentForm" :rules="rules" label-width="80px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="评价" prop="commentForm.note">
            <el-input
                style="width: 300px"
                size="medium"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="commentForm.note">
            </el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="commentData()">提交</el-button>
          <el-button type="info" @click="dialogComment = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "historyOrders",
  data() {
    return {
      dialogComment: false,
      commentForm: {},
      rules: {
        note: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],
      },
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      tableData: [], //表中数据
      page_id: 1,   //当前页码
      page_size: 5,    //每页数量
      total: 0,
      order_id: "",
      status: ['已完成', '已评价', '取消'],
    }
  },
  created() {
    this.load();
  },
  methods: {
    GoPay(id) {
      this.$router.push({
        path: '/payment',
        query: {
          pay_id: id,
        }
      })
    },
    comment(id) {
      this.order_id = id
      console.log("行数据", this.commentForm)
      this.dialogComment = true //打开弹窗
    },
    commentData() {
      this.$refs['commentRef'].validate((valid) => {
        if (valid) {
          console.log("验证成功", this.user.id)
          console.log("验证成功", this.order_id)
          console.log("验证成功", this.commentForm.note)
          this.$request.post('/comment_add/', {
            "user_id": this.user.id,
            "order_id": this.order_id,
            "context": this.commentForm.note,
          }).then(res => {
            if (res.code === '200') {
              this.$message.success("评价成功")
              this.dialogComment = false
              this.load(1)
            } else {
              this.$message(res.msg)
            }
          }).catch()
        }
      })
    },
    load(page_id) {  //分页查询
      if (page_id) this.page_id = page_id
      console.log(this.user.id)
      this.$request.post('/orders_list/', {
        "user_id": this.user.id,
        "page_size": this.page_size,
        "page_id": this.page_id,
        "classify_list": this.status,
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.order_list
          this.total = res.data.item_amount
          console.log("订单数据", res.data)
        } else if (res.code === '501') {

        } else {
          this.$message(res.msg)
        }
      })
    }
    ,
    handleCurrentChange(page_id) {
      this.load(page_id)
    }
    ,
    reset() {
      this.tableData.hotel_name = ''
      this.load()
    }
    ,
    cancel(id) {
      this.$request.post('/order_status_update/', {
        "order_id": id,
        "status": "已取消"
      }).then(res => {
        if (res.code === '200') {
          this.$message.success("取消订单成功")
          setTimeout(() => {
            window.location.reload();
          }, 1000);
          this.load()
        } else {
          this.$message.success("取消订单成功")
          setTimeout(() => {
            window.location.reload();
          }, 1000);
          this.load()
        }
      }).catch(() => {
      })
    },
    live(id) {
      this.$request.post('/order_status_update/', {
        "order_id": id,
        "status": "入住"
      }).then(res => {
        if (res.code == '200') {
          this.$message.success("入住成功")
          setTimeout(() => {
            window.location.reload();
          }, 1000);
          this.load()
        } else {
        }
      }).catch(() => {
      })
    },
    TUI(id) {
      this.$request.post('/order_status_update/', {
        "order_id": id,
        "status": "退房"
      }).then(res => {
        if (res.code == '200') {
          this.$message.success("退房成功")
          setTimeout(() => {
            window.location.reload();
          }, 1000);
          this.load()
        } else {
        }
      }).catch(() => {
      })
    },
  }
}
</script>
<style scoped>

</style>